<template>
<div class="flex items-stretch gap-4">
    <MethodSelect :village="village" :interfaces="interfaces" :value="data.selectedInterface" @input="onInterfaceInput"/>
    <div class="flex-1 border rounded flex flex-col items-stretch" v-loading="data.comLoader?.isLoading">
        <template v-if="data.comLoader">
            <Component class="flex-1" v-if="data.comLoader.data" :is="data.comLoader.data.default" :village="village" :interface="data.selectedInterface"></Component>
            <el-result class="flex-1" v-else-if="data.comLoader.error" icon="error" :title="data.comLoader.error.message"></el-result>
        </template>
        <el-empty description="请选择对接方式" v-else></el-empty>
    </div>
</div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import MethodSelect from './MethodSelect.vue';
import * as api from './api';
import { Loader } from 'src/framework/network/Loader';
import { Village } from '../../types';

defineProps<{
    village: Village
    interfaces: api.Interface[]
}>()

const data = reactive({
    selectedInterface: undefined as api.Interface | undefined,
    comLoader: undefined as Loader<any> | undefined
})

function onInterfaceInput(iface?: api.Interface) {
    if (iface) {
        data.selectedInterface = iface
        data.comLoader = new Loader(iface.component ?? (() => Promise.reject(new Error('暂不支持此接入方式'))))
        data.comLoader.load()
    } else {
        data.selectedInterface = undefined
        data.comLoader = undefined
    }
}

</script>
<style scoped>
:deep(.api-table .el-table) {
    border-radius: 0;
}
</style>